<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <title>添加地址</title>
    <link rel="stylesheet" type="text/css" href="css/jiazaitoubu.css">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/index2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/center.css">
    <link rel="stylesheet" type="text/css" href="css/city.css">
    <script src="js/Popt.js"></script>
    <script src="js/cityJson.js"></script>
    <script src="js/citySet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="js/common.js"></script>
    
</head>


<body>
<div id="app">	
<top></top>
<bar></bar>

<div class="centers_m">
   <bars></bars>
   
   <div class="public_m1">
           
            <div class="public_m2">已有地址</div>
            <!--提示信息-->
                        <div class="public_m5">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr style=" border-bottom:1px solid #000">
                        <th class="olist1">供暖号码</th>
                        <th class="olist2">维修地址</th>
                        <th class="olist3">联系电话</th>
                        <th class="olist4">地址默认</th>
                        <th class="olist5">操作</th>
                    </tr>
                    <tr>
                        <td><a href="#">000000007</a></td>
                        <td>青岛市市南区中联广场B1三楼</td>
                        <td>12234125125</td>
                        <td class="money">设定为默认</td>
                        <td>
                        <a href="#" style=" margin-right:6px">删除</a>
                        </td>
                    </tr>
                    
                   <tr>
                        <td><a href="#">000000007</a></td>
                        <td>青岛市市南区中联广场B1三楼</td>
                        <td>12234125125</td>
                        <td class="money">设定为默认</td>
                        <td>
                        <a href="#" style=" margin-right:6px">删除</a>
                        </td>
                    </tr>
                    
                    
                    </tbody>
                </table>
            </div>
            <!--翻页符号-->
            <div class="fanyefh_m">
                <a href="#">上一页</a>
                <a href="#"class="addclass_m">1</a>
                <a href="#">2</a>
                <a href="#">下一页</a>
            </div>
        </div>
 <div class="public_m2">添加地址</div>
            <div class="public_m4">
                <p>
                    <em><h1>添加地址：</h1></em>



                    <em>省：</em>

                    <select v-model="province.id" @click="findCity" style=" height:25px; width: 260px; border:1px solid #eaeaea">
                        <option>-请选择-</option>
                        <option v-for="selectAllProvince,index in selectAllProvince" :value="selectAllProvince.id">
                            {{selectAllProvince.title}}
                        </option>
                    </select>
                    <br>
                    <em>市：</em>
                    <select v-model="city.id" @click="findDistrict" style=" height:25px; width: 260px; border:1px solid #eaeaea">
                        <option>-请选择-</option>
                        <option v-for="findCityByProvinceId,index in findCityByProvinceId"
                                :value="findCityByProvinceId.id">{{findCityByProvinceId.title}}
                        </option>
                    </select>
                    <br>
                    <em>区：</em>
                    <select v-model="district.id" @click="findStreet" style=" height:25px; width: 260px; border:1px solid #eaeaea">
                        <option>-请选择-</option>
                        <option v-for="findDistrictByCityID,index in findDistrictByCityID"
                                :value="findDistrictByCityID.id">{{findDistrictByCityID.title}}
                        </option>
                    </select>
                    <br>
                    <em>街道：</em>
                    <select v-model="street.id" style=" height:25px; width: 260px; border:1px solid #eaeaea">
                        <option>-请选择-</option>
                        <option v-for="findStreetByDistrictId,index in findStreetByDistrictId"
                                :value="findStreetByDistrictId.id">{{findStreetByDistrictId.title}}
                        </option>
                    </select>
                    <br>
                    <em>详细地址：</em>
                    <input type="text" style=" height:25px; width: 260px; border:1px solid #eaeaea">
                </p>

                    <em><h1>绑定供暖号：</h1></em>
                    <input type="text" style=" height:30px; border:1px solid #eaeaea; width:240px">


                <p>
                    <em><h1>手机联系：</h1></em>
                    <input v-model="userinfo.phone" type="text" style=" height:30px; border:1px solid #eaeaea; width:240px">
                </p>
                   
          
                <a  class="public_m3">点击添加</a>
            </div>
        </div>
    
    
    <end></end>
</div>
</body>
</html>

<script>
    var app = new Vue({
        el:"#app",
        data: {
            admin: {},
            message: '',
            userinfo: {
                id: 1,
                profile: '',
            },

            province: {
                id: ""
            },//省份
            city: {
                id: ""
            },//城市
            district: {
                id: ""
            },//区
            street: {
                id: ""
            },//街道
        },
            created: function () {
                this.initData(1);//初始化方法
                this.a();
                // this.findProvincialAndMunicipaLinkageByAddress();
                this.initProvincialAndMunicipalLinkage();
            },

            methods: {
                initProvincialAndMunicipalLinkage: function () {
                    axios.post("http://localhost:8080/userinfo/selectAllProvince")
                        .then(res => {
                            console.log(res.data.data);
                            this.selectAllProvince = res.data.data;
                        });
                },
                findCity: function () {
                    axios.post("http://localhost:8080/userinfo/findCityByProvinceId", this.province)
                        .then(res => {
                            console.log(res.data.data);
                            this.findCityByProvinceId = res.data.data;
                        });
                },
                findDistrict: function () {
                    axios.post("http://localhost:8080/userinfo/findDistrictByCityId", this.city)
                        .then(res => {
                            console.log(res.data.data);
                            this.findDistrictByCityID = res.data.data;
                        });
                },
                findStreet: function () {
                    axios.post("http://localhost:8080/userinfo/findStreetByDistrictId", this.district)
                        .then(res => {
                            console.log(res.data.data);
                            this.findStreetByDistrictId = res.data.data;
                        });

                },
                //数据初始化
                initData: function (pageNum) {

                    axios.post("http://localhost:8080/manage/showDistrict?id=1")
                        //链接数据库
                        .then(res => {
                            console.log(res.data.data);
                            this.street=res.data.data;

                        });

                },
                a:function(){
                    axios.post("http://localhost:8080/manage/showUserinfoType?id=1")
                        //链接数据库
                        .then(res => {
                            console.log(res.data.data);
                            this.userinfo=res.data.data;

                        });
                },



            }


    });
</script>











<script type="text/javascript">
            $("#city").click(function (e) {
                SelCity(this,e);
            });
        </script>









<script>
     //模拟下拉菜单的js*/
     $(".sjhcp_in span").on("mouseenter", function(e)
        {
            if($(".little_list").is(":hidden"))
            {
                $(".little_list").show();
            }
            else
            {
                $(".little_list").hide();
            }
            $(".little_list em").click(function()
            {
                var txt=$(this).text();
                $(".sjhcp_in span").text(txt);
                $(".little_list").hide();
            })
            $(document).one("click", function()
            {
                $(".little_list").hide();
            });
            e.stopPropagation();
        });
            $(".little_list").on("click", function(e)
            {
                e.stopPropagation();
            });
     
      window.onload=function()
      {
        $(".aside").css({display:"none"})
        $(".important").mouseenter(function(){
            $(".aside").css({display:"block"})
        }).mouseleave(function(){
            $(".aside").css({display:"none"})
        })
    }
       
</script>